<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器</title>
    <link rel=stylesheet type="text/css" href="css/VideoPlayerStyle.css">
</head>
<body>
<div id="video-container">
    <h1>视频播放器</h1>
    <video id="videoPlayer" controls width="100%">
    </video>
</div>
<div id="video-list">
    <input type="text" id="search" placeholder="搜索视频...">
    <ul id="item-list"></ul>
</div>

<script>
    const videoPlayer = document.getElementById('videoPlayer');
    const searchInput = document.getElementById('search');
    const itemList = document.getElementById('item-list');

    // 从服务器加载视频列表
    function loadVideoList() {
        fetch('getVideos') // 调用 Servlet 获取视频列表
            .then(response => response.json())
            .then(videos => {
                videos.forEach(video => {
                    const li = document.createElement('li');
                    li.textContent = video;
                    console.log(`Video/${video}`);
                    li.onclick = () => playVideo("Video/"+video); // 设置点击播放视频
                    itemList.appendChild(li);
                });
            })
            .catch(error => {
                console.error('获取视频列表失败:', error);
                return response.text().then(text => console.error('响应内容:', text));
            });
    }

    function playVideo(videoSrc) {
        console.log(videoSrc);
        videoPlayer.src = videoSrc;
        videoPlayer.play();
    }

    searchInput.addEventListener('input', function() {
        const filter = searchInput.value.toLowerCase();
        const items = itemList.getElementsByTagName('li');

        for (let i = 0; i < items.length; i++) {
            const itemText = items[i].textContent.toLowerCase();
            if (itemText.includes(filter)) {
                items[i].style.display = ""; // 显示匹配项
            } else {
                items[i].style.display = "none"; // 隐藏不匹配项
            }
        }
    });
    // 页面加载时调用
    window.onload = loadVideoList;
    videoPlayer.volume = 0.1;
</script>
</body>
</html>
